<template >
    <div class="empty-box" :style="{ marginTop: space ?? '20vh', marginBottom: space ?? '20vh' }">
        <VarImage :src="url || $img('common/no-data.png')" height="100" width="100"></VarImage>
        <span class="empty-text">
            <span v-if="!$slots.default">{{ text ?? $t('empty_default') }}</span>
            <slot></slot>
        </span>
    </div>
</template>
<script lang="ts" setup>

// 定义 props
defineProps<{
    url?: string,
    text?: string,
    /**
     * 间距，默认为 20vh
     */
    space?: string
}>();

</script>
<style lang="scss" scoped>
// 指定padding值
.empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20vh 0;

    .empty-text {
        margin-top: 20px;
        color: $text-sub;
        text-align: center;
        padding: 0 48px;
        line-height: 40px;
    }
}
</style>
